import React, { Component } from 'react'
// 导入路由组件
import { Switch, Route, Redirect, NavLink, withRouter } from 'react-router-dom'
// 步骤一:以下改为异步加载的方式。
const Login = React.lazy(() => import('../components/Login'))
const Reg = React.lazy(() => import('../components/Reg'))
const Index = React.lazy(() => import('../components/Index'))
const NotFound = React.lazy(() => import('../components/NotFound'))
const List = React.lazy(() => import('../components/List'))
const Detail = React.lazy(() => import('../components/Detail'))
const BigPage = React.lazy(() => import('../components/BigPage'))
const cssswitch = React.lazy(() => import('../components/MySwitchTransition'))
const Antd = React.lazy(() => import('../components/Antd'))
const Axios = React.lazy(() => import('../components/Axios'))
const Redux = React.lazy(() => import('../components/Redux'))
const Redux2 = React.lazy(() => import('../components/Redux2'))
const newRedux = React.lazy(() => import('../components/newRedux'))


export default class Router extends Component {
  render() {
    return (
      <>
        {/* 步骤二：使用React.Suspense这个组件包裹Switch，添加fallback属性作为跳转时展示的内容 */}
        {/* Suspense悬疑，待定 */}
        <React.Suspense fallback={<mark>loading ...</mark>}>
          <Switch>
            {/* Switch路由切换 */}
            {/* Route路由对象 */}
            {/* exact严格匹配，路径开头的斜线，路由的path和浏览器的url要完全一致，才会渲染路由 */}
            {/* strict严格匹配，路径结尾的斜线，必须先使用exact，才能使用strict */}
            <Route exact path="/" component={Index}></Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/reg" component={Reg}></Route>
            <Route path="/list" component={List}></Route>
            <Route path="/detail/:name" component={Detail}></Route>
            <Route path="/bigpage" component={BigPage}></Route>
            <Route path="/cssswitch" component={cssswitch}></Route>
            <Route path="/antd" component={Antd}></Route>
            <Route path="/axios" component={Axios}></Route>
            <Route path="/redux" component={Redux}></Route>
            <Route path="/redux2" component={Redux2}></Route>
            <Route path="/newredux" component={newRedux}></Route>
            {/* 首页的路由，地址是‘/’时需要带上exact，不需要strict。其他的路由都不需要 */}
            {/* path="*"或者省略path属性，可以用来处理404 */}
            {/* <Route path="*" component={NotFound}></Route> */}
            {/* ------ 404处理方式2，重定向 ------ */}
            <Route path="/404" component={NotFound}></Route>
            <Redirect to="/404"></Redirect>
          </Switch>
        </React.Suspense>
      </>
    )
  }
}
